<template>
	<div class="login">
		<p>{{ msg }}</p>
		<p><input type="text" v-model="user.username"></p>
		<p><input type="text" v-model="user.password"></p>
		<p>{{ user.username }} - {{ user.password }}</p>
		<button class="button" @click="login">login</button>
		<p>{{ number }}</p>
		<p><button class="button" @click="add">++</button></p>
		<p><button class="button" @click="sub">--</button></p>
	</div>
</template>

<script>
import { onMounted, reactive, toRefs, computed } from 'vue';
import { LoginRequest } from '@/api/api';
import { useStore } from 'vuex';
export default {
	name: "Login",
	setup() {
		const store = useStore();
		const state = reactive({
			msg: "login",
			user: {
				username: "15653116166",
				password: "maruiqq100",
			},
			number: computed(() => store.state.number),
		});

		onMounted(() => {
			
		});

		const login = () => {
			LoginRequest(state.user).then(res => {
				console.log(res);
			});
		};

		function add(){
			store.commit("add");
		}

		function sub(){
			store.commit("sub");
		}

		return {
			...toRefs(state),
			login,
			add, sub
		};
	}
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
